import React from 'react'
import ReactDOM from 'react-dom'
import MessageSettingWordEdit from './MessageSettingWordEdit'
import MessageSettingKeyWordEdit from './MessageSettingKeyWordEdit'
import MenuSettingAssetSelect from '../MenuSettingAssetSelect'
import AssetGridCell from '../AssetGridCell'

class MessageAddEventKey extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      keyWord: "",
      text: "",
      responseType: "text",
      newsContent: {},
      customUrl: []
    }
  }

  componentDidMount() {
    this.$modal = $(ReactDOM.findDOMNode(this.refs.MessageSettingWordEdit))
    this.$modalKeyWord = $(ReactDOM.findDOMNode(this.refs.MessageSettingKeyWordEdit))
    this.$modalPicture = $(ReactDOM.findDOMNode(this.refs.MessageSettingPictureEdit))
  }


//点击保存按钮
  onAddEventButtonClick() {
    if (this.state.keyWord.trim().length == 0) {
      alert("请输入关键字!");
      return ;
    }else if (this.state.text.trim().length == 0 && !this.state.newsContent.news_item) {
      alert("请输入回复内容!");
      return ;
    }
    var newsContent = this.state.newsContent
    var customUrl = $(ReactDOM.findDOMNode(this.refs.customUrl0)).val();
    if (customUrl && customUrl.length > 0 && newsContent.news_item.length > 0) {
      newsContent.news_item[0].url = customUrl;
    }

    this.props.onAddEventKey({
      keyWord: this.state.keyWord,
      text: this.state.text,
      responseType: this.state.responseType,
      newsContent: newsContent
    })

    this.setState({
      keyWord: "",
      text: "",
      responseType: "text",
      newsContent: {},
      customUrl: []
    })

  }

  onCreateWordClick() {
    this.setState({
      responseType: 'text'
    })
  }

  onCreateKeyWordClick() {
    this.$modalKeyWord.modal("show")
  }

  onCreatePictureClick() {

    var radioCheck = $('#checkTxt').val();
    if(radioCheck == "1"){
        $('#checkTxt').attr("checked", "false");
    }
    this.setState({
      responseType: 'news'
    })
  }

  onPictureSelectBtnClick() {
    this.$modalPicture.modal("show")
  }

  onAddKeyWordClick(event) {
    var str = $(event.target).val();
    this.setState({
      keyWord: str
    })
  }

  onAddMessageWordClick(event) {
    var str = $(event.target).val();
    this.setState({
      text: str,
      responseType: 'text'
    })
  }

  onAssetGridClick(media_id, data) {
    this.setState({
      newsContent: data,
      responseType: 'news'
    })
    this.$modalPicture.modal("hide")
  }

  onRadioChange(type) {
    this.setState({
      responseType: type
    })
  }

  renderPreview() {
    var self = this;
    if (this.state.responseType == 'text') {
      return (
        <div className="col-sm-8 reply-content">
          <input ref="PropertyPhone" type="text" className="form-control"
                  id="Property-phone" placeholder="回复内容" value={self.state.text}
                  onChange={(event)=>this.onAddMessageWordClick(event)}/>
        </div>

      )
    }else if (this.state.responseType == 'news') {
      return (
        <div className="col-sm-8 reply-content">
          <button type="button" className="btn-create"
                  onClick={(event) => self.onPictureSelectBtnClick(event)}>选择图文</button>
          {(self.state.newsContent.news_item&&self.state.newsContent.news_item.length>0)?
            self.renderNewsPreview():false}
        </div>
      )
    }else {
      return "";
    }
  }

  renderNewsPreview() {
    return (
      <div className="message-news-preview row">
        <AssetGridCell
          data = {{content: this.state.newsContent}}/>
        <div className="input-group input-cell">
          <span className="input-group-addon" id="sizing-addon2">url</span>
          <input ref="customUrl0" type="text" className="form-control" placeholder="不输入即默认Url" aria-describedby="sizing-addon2"
                />
        </div>
      </div>
    )
  }

  renderWrapper() {
    var self = this;
    if (this.props.isShow) {
      return (
        <div className="message-eventkey-list">
          <table className="table">
            <thead>
              <tr className="newRule">
                <th>新建关键字</th>
              </tr>
            </thead>
          </table>
          <div className="eventkey-new-content">
              <div className="row">
                <label className="col-sm-1 keyword">关键词</label>
                <div className="col-sm-10 col-lg-8">
                  <input ref="PropertyPhone" type="text" className="form-control"
                          id="Property-phone" placeholder="关键字" value={self.state.keyWord}
                          onChange={(event)=>this.onAddKeyWordClick(event, "keyWord")}/>
                </div>

              </div>
              <div className="row">
                <label className="col-sm-1 keyword autoreply">自动回复</label>
                <div className="col-sm-10">

                    <div className="checkbox" onClick={(event)=>this.onCreateWordClick()}>
                      <label>
                        {this.state.responseType=='text'?
                        <input id="checkTxt" name="replyType" type="radio" value="1" checked="checked"/>
                        :<input id="checkTxt" name="replyType" type="radio" value="1" onChange={(event)=>this.onRadioChange("text")}/>}
                        文本
                      </label>
                    </div>
                    <div className="checkbox" onClick={(event)=>this.onCreatePictureClick()}>
                      <label>
                        {this.state.responseType=='news'?
                        <input name="replyType" type="radio" checked="checked" />
                      :<input name="replyType" type="radio" onChange={(event)=>this.onRadioChange("news")}/> }
                        图文
                      </label>
                    </div>
                </div>
                {this.renderPreview()}
              </div>

                <div className="twoBtn">
                <button type="button" className="btn btn-success saveBtn"
                    onClick={(event)=>this.onAddEventButtonClick(event)}>保存</button>
                <button type="button" className="btn btn-success cancelBtn"
                    onClick={(event)=>this.props.onAddEventCancel(event)}>取消</button>

                </div>
          </div>
        </div>

      )
    }else {
      return "";
    }
  }

  render() {
    var self = this;
    return (
      <div className="message-add-eventkey">
        {this.renderWrapper()}
        <MessageSettingWordEdit
          ref = "MessageSettingWordEdit"
          text = {this.state.text}
          onAddMessageWordClick={this.onAddMessageWordClick.bind(self)}/>
        <MessageSettingKeyWordEdit
          ref = "MessageSettingKeyWordEdit"
          keyWord = {this.state.keyWord}
          onAddKeyWordClick={this.onAddKeyWordClick.bind(self)}/>
        <MenuSettingAssetSelect
          wechat = {self.props.wechat}
          ref = "MessageSettingPictureEdit"
          onAssetGridClick = {this.onAssetGridClick.bind(self)}/>
      </div>
    )
  }
}

export default MessageAddEventKey;
